<template>
	<el-container>
		<el-header height="72px">
			<Header />
		</el-header>
		<el-container class="container">
			<el-aside class="side" width="170px">
				<Aside />
			</el-aside>

			<el-container v-loading="isLoading">
				<el-main>
					<router-view />
				</el-main>
				<el-footer>
					<Footer />
				</el-footer>
			</el-container>
		</el-container>
	</el-container>
</template>

<script setup>
import Aside from '@/components/Aside/index.vue'
import Header from '@/components/Header/index.vue'
import Footer from '@/components/Footer/index.vue'
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
const store = useStore()
const isLoading = computed(() => store.state.isLoading)
setTimeout(() => {
	store.commit('setLoading', false)
}, 2000)
</script>

<style>
.container {
	height: calc(100vh - 72px);
}
.el-aside {
	overflow: hidden;
	background-color: #303543;
}

.el-header {
	min-width: 1024px;
}
.el-main {
	min-width: 1024px;
}
.el-main,
.el-footer {
	background-color: #f1f3f7;
}
</style>
